<template>
    <view class="verification-code font-24" :class="[can_check_verification ? '' : 'verification-code-disable', $i18n.locale]" @tap="get_verification_code">
        {{ verification_code }}
    </view>
</template>

<script>
var timeer = null
var $phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
var $email = /^([a-zA-Z\d])((\w|-)+\.?)+@([a-zA-Z\d]+\.)+[a-zA-Z]{2,6}$/
export default {
    props: {
        value: {},
        timeout: {
            type: Number,
            default: 60
        },
        area: {}
    },
    data() {
        return {
            can_check_verification: true, //是否可获取验证码
            verification_code_time: 0 //倒计时
        }
    },
    methods: {
        get_verification_code() {
            if ($email.test(this.value)) {
                this.email()
            } else {
                this.phone()
            }
        },
        email() {
            if (!this.area) {
                return this.$toastApp(this.$t('forgetPSW.placeOfAttributionPlaceholder'))
            }
            this.$http('post|api/Api/send_validate_code', {
                mobile: this.value,
                area: this.area,
                type: 'email'
            })
                .then(res => {
                    this.$toastApp(res.msg)
                    this.can_check_verification = false
                    this.verification_code_time = this.timeout
                    setTimeout(() => {
                        this.verification_code_time = this.timeout - 1
                        this.verification_timeout()
                    }, 1000)
                })
                .catch(err => {
                    this.$toastApp(err.msg)
                })
        },
        phone() {
            if (!this.$check_mobel(this.value)) {
                return this.$toastApp(this.$t('forgetPSW.accountCheckoutPhoneError'))
            }
            if (!this.area) {
                return this.$toastApp(this.$t('forgetPSW.placeOfAttributionPlaceholder'))
            }
            this.$http('post|api/Api/send_validate_code', {
                mobile: this.value,
                area: this.area,
                type: 'phone'
            })
                .then(res => {
                    this.$toastApp(res.msg)
                    this.can_check_verification = false
                    this.verification_code_time = this.timeout
                    setTimeout(() => {
                        this.verification_code_time = this.timeout - 1
                        this.verification_timeout()
                    }, 1000)
                })
                .catch(err => {
                    this.$toastApp(err.msg)
                })
        },
        verification_timeout() {
            if (this.verification_code_time <= 0) {
                this.can_check_verification = true
                return
            }
            timeer = setTimeout(() => {
                this.verification_code_time -= 1
                this.verification_timeout()
            }, 1000)
        }
    },
    computed: {
        verification_code() {
            if (this.verification_code_time === 0) {
                return this.$t('forgetPSW.getVerificationCode')
            } else {
                return `${this.verification_code_time}` + this.$t('forgetPSW.sendVerificationCodeTips')
            }
        }
    },
    destroyed() {
        clearTimeout(timeer)
    }
}
</script>

<style lang="scss">
.verification-code {
    width: 200rpx;
    height: 60rpx;
    border-radius: 12rpx;
    /* border:2upx solid; */
    /* background-color: #4E6EF3; */
    font-size: 28rpx;

    text-align: center;
    line-height: 60rpx;
    overflow: hidden;
    &.zh {
        color: var(--theme);
    }
    &.hk {
        color: var(--themeHK);
    }
}
.verification-code-disable {
    color: #b7b7b7;
    background-color: #ffffff;
}
</style>
